<template>
	<view class="ai">
		<headerinfo></headerinfo>
		<view class="width60" style="width: 80%;">
			<view class="" style="padding: 20px;">
				<el-form :inline="true" :model="query" class="demo-form-inline">
					<el-form-item>
						<el-button type="primary" @click="backPage()" icon="el-icon-arrow-left"></el-button>
					</el-form-item>
					<el-form-item label="">
						<el-date-picker @change="changedate" v-model="query.date" value-format="yyyy-MM-dd" type="date" placeholder="具体日期">
						</el-date-picker>
					</el-form-item>
					<el-form-item label="">
						<el-date-picker  @change="changemonth" v-model="query.month" value-format="yyyy-MM" type="month" placeholder="选择月份">
						</el-date-picker>
					</el-form-item>
					<el-form-item label="">
						<el-select v-model="query.priority" placeholder="请选择任务优先级">
							<el-option v-for="item in priorityList" :key="item.value" :label="item.label"
								:value="item.value">
							</el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="">
						<el-select v-model="query.status" placeholder="请选择任务优先级">
							<el-option v-for="item in statusList" :key="item.value" :label="item.label"
								:value="item.value">
							</el-option>
						</el-select>
					</el-form-item>
					<el-form-item>
						<el-button type="primary" @click="getData()">查询</el-button>
					</el-form-item>
				</el-form>
				<el-table border :data="tableData" style="width: 100%">
					<el-table-column prop="title" label="标题">
					</el-table-column>
					<el-table-column prop="priority" label="状态" width="140">
					</el-table-column>
					<el-table-column prop="category" label="分类" width="140">
					</el-table-column>
					<el-table-column prop="description" label="描述">
					</el-table-column>
					<el-table-column fixed="right" label="操作" width="180">
						<template slot-scope="scope">
							<!-- <el-button type="text" size="small" @click="over(scope.row)">完成</el-button> -->
							<el-button type="text" size="small" @click="backwork(scope.row)">取消分配</el-button>
						</template>
					</el-table-column>
				</el-table>
			</view>

		</view>





	</view>
</template>

<script>
	import headerinfo from '@/components/headerinfo'
	import {
		handleShowEffects
	} from '@/js_sdk/firework-effects/effect.js'
	export default {
		components: {
			headerinfo
		},
		data() {
			return {
				tableData: [],
				query: {
					date:'',
					month:'',
					priority:'',
					status:'',
				},
				priorityList: [{
					label: '紧急重要',
					value: 'HIGH_HIGH'
				}, {
					label: '紧急但不重要',
					value: 'HIGH_LOW'
				}, {
					label: '不紧急但重要',
					value: 'LOW_HIGH'
				}, {
					label: '不紧急不重要',
					value: 'LOW_LOW'
				}],
				statusList: [{
					label: '紧急重要',
					value: 'COMPLETED'
				}, {
					label: '紧急但不重要',
					value: 'IN_PROGRESS'
				}, {
					label: '不紧急但重要',
					value: 'NOT_ASSIGNED'
				}, {
					label: '不紧急不重要',
					value: 'NOT_STARTED'
				}],
			};
		},
		onLoad(e) {
			this.getData()
		},
		mounted() {
			this.fangyanhua()
		},
		methods: {
			fangyanhua() {
				this.$message.success('恭喜自己完成所有任务')
				handleShowEffects({
					type: 'schoolpride' //fireworks schoolpride realisticlook stars all
				})
			},
			getData() {
				this.$api2.getAssignedTasks(this.query).then(res => {
					this.tableData = res
				})
			},
			changedate(){
				this.query.month = ''
			},
			changemonth(){
				this.query.date = ''
			},
			backwork(e){
				this.$api2.returnTaskToPool({taskId:e.docId}).then(res => {
					this.$message.success('操作成功')
					this.getData()
				})
				
			},
			backPage(){
				uni.navigateBack()
			}
		}
	};
</script>


<style lang="scss" scoped>
</style>